<template>
	<div class="wrap">
		<daohang></daohang>
		<!--轮播图-->
		<a href="#/LunBoXiangQ">
	<div class="cont-dtu">
		<a>
		<img class="cont-img cont-active" src="../assets/img/shouye/tuijian/t.png" alt=""/>
		<img class="cont-img" src="../assets/img/shouye/muying/mu3.png" alt=""/>
		<img class="cont-img" src="../assets/img/shouye/meishi/mei1.png" alt=""/>
		<img class="cont-img" src="../assets/img/shouye/muying/mu1.png" alt=""/>
		<img class="cont-img" src="../assets/img/shouye/tuijian/lunbo.png" alt=""/>
		</a>
		<div class="cont-fen">
			<span class="cont-span cspan"></span>
			<span class="cspan"></span>
			<span class="cspan"></span>
			<span class="cspan"></span>
			<span class="cspan"></span>
		</div>
	</div>
	</a>
		<!--新品促销模块-->
		<div class="newYear">
			<!--小喇叭标题-->
			<div class="laba">
				<img src="../assets/img/shouye/tuijian/laba.png"  alt=""/>
				<span>新品上市&nbsp&nbsp促销大庆</span>
			</div>
			<!--新品模块图片-->
			<div class="newCont">
				<!--左边-->
				<div class="newLeft">
					<img src="../assets/img/fenlei/jiemian.png"  alt=""/>
					<a href="#/XianShiDuanHuo"><span class="xianshi">限时断货</span></a>
				</div>
				<!--右边-->
				<div class="newRight">
					<a href="#/PingPaiJingXuan">
					<div class="shangping">
						<p class="sjing">品牌精选</p>
						<img src="../assets/img/shouye/tuijian/bao.png" alt=""/>
					</div>
					</a>
					<div class="shangping">
						<p class="sjing">超值热卖</p>
						<img src="../assets/img/shouye/tuijian/chengzi.png" alt=""/>
					</div>
				</div>
			</div>
		</div>
		<!--今日推荐部分-->
		<div class="wrap">
			<div v-for="item in 10" class="tuijian">
				<!--推荐标题-->
				<div class="tuiBiao">
					<img src="../assets/img/shouye/tuijian/tuijian.png" alt=""/>
					<span>今日推荐</span>
				</div>
				<!--绚丽眼妆-->
				<a href="#/XuanLiYanZhuang"><img class="tuilun" src="../assets/img/shouye/tuijian/lunbo.png" alt=""/></a>
				<!--口红-->
				<div class="hong">
					<div class="childHong">
						<a href="#/ShangPingXiangQing"><img class="redimg" src="../assets/img/shouye/tuijian/kouhong2.png" alt=""/></a>
						<span class="jieshao">不易脱妆口红</span>
						<span class="jiage">￥59</span>
					</div>
					<div class="childHong">
						<a href="#/ShangPingXiangQing"><img class="redimg" src="../assets/img/shouye/tuijian/chuncai.png" alt=""/></a>
						<span class="jieshao">花蕊唇彩</span>
						<span class="jiage">￥129</span>
					</div>
					<div class="childHong">
						<a href="#/ShangPingXiangQing"><img class="redimg" src="../assets/img/shouye/tuijian/kouhong.png" alt=""/></a>
						<span class="jieshao">娇吻玉口红</span>
						<span class="jiage">￥88</span>
					</div>
				</div>
				<!--底-->
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		methods: {
			clun:function(){
				var cund = 0;
				setInterval(function(){
					$(".cont-img").eq(cund).fadeIn(5000).siblings(".cont-img").fadeOut(2000);
					$(".cspan").eq(cund).addClass("cont-span").siblings(".cspan").removeClass("cont-span");
					cund++;
					if (cund == 5) {
						cund = 0;
					}
				},7000);
			}
		},
		mounted:function(){
			this.clun();
		},
		components: {
			daohang,
		}
	}
	import daohang from '@/components/daohang'
</script>

<style>
	/*轮播图*/
	.cont-dtu{
		width: 100%;
		height: 30rem;
		border: 0.1rem solid #FFFFFF;
		text-align: center;
		position: relative;
	}
	.cont-dtu>a{
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
	}
	.cont-img{
		width:100%;
		height:100%;
		position: absolute;
		top:0;
		left:0;
		display: none;
	}
	.cont-active{
		display: block;
	}
	/*分页器*/
	.cont-fen{
		width: 100%;
		height: 5rem;
		line-height: 5rem;
		position: absolute;
		bottom: 0;
	}
	.cont-fen>span{
		display: inline-block;
		width:0.8rem;
		height: 0.8rem;
		border:0.2rem solid #FFFFFF;
		border-radius: 50%;
		background:#808080;
		margin-right:1rem;
	}
	.cont-fen .cont-span{
		background: #e53e42;
	}
	/*新品模块*/
	
	.newYear {
		width: 100%;
		height: 36rem;
		background: #ffffff;
		margin-bottom: 2rem;
	}
	
	.laba {
		height: 6rem;
		font-size: 3rem;
		width: 100%;
		padding-left: 2rem;
		line-height: 6rem;
	}
	
	.laba>img {
		width: 3rem;
		height: 3rem;
	}
	/*新品模块*/
	
	.newCont {
		width: 100%;
		height: 28rem;
		padding: 1rem 0;
		position: relative;
		border-top: 0.1rem solid lightgrey;
	}
	
	.newLeft {
		width: 30rem;
		height: 100%;
		border-right: 0.1rem solid lightgray;
	}
	
	.newLeft>img {
		width: 24.1rem;
		height: 19.5rem;
		position: absolute;
		left: 3.2rem;
		bottom: 2.2rem;
	}
	
	.xianshi {
		display: block;
		width: 11.2rem;
		height: 4rem;
		background: red;
		font-size: 2.4rem;
		color: #FFFFFF;
		text-align: center;
		position: absolute;
		left: 2rem;
		top: 1.5rem;
		line-height: 4rem;
	}
	/*新品模块 右*/
	
	.newRight {
		position: absolute;
		top: 0;
		right: 0;
		width: 40.9rem;
	}
	
	.shangping {
		width: 39.8rem;
		height: 15rem;
		border-top: 0.1rem solid lightgray;
	}
	
	.shangping:first-child {
		border: none;
	}
	
	.sjing {
		width: 2.5rem;
		height: 11.2rem;
		font-size: 2.5rem;
		margin-left: 3rem;
		color: red;
	}
	
	.shangping>img {
		width: 20rem;
		height: 15rem;
		margin-left: 13rem;
		margin-top: -11rem;
	}
	/*推荐部分*/
	
	.tuijian {
		height: 65rem;
		width: 100%;
		background: #FFFFFF;
		margin-top: 2rem;
		border-top: 0.01rem solid lightgray;
		border-bottom: 0.01rem solid lightgray;
	}
	
	.tuiBiao {
		height: 6rem;
		font-size: 3rem;
		width: 100%;
		padding-left: 2rem;
		line-height: 6rem;
	}
	.tuiBiao>img {
		width: 3rem;
		height: 3rem;
	}
	.tuilun {
		width: 100%;
		height: 30rem;
	}
	/*口红*/
	
	.hong {
		width: 100%;
		height: 24.9rem;
		padding: 1.9rem;
		text-align: center;
	}
	
	.childHong {
		width: 22.6rem;
		height: 18rem;
		border-right: 0.01rem solid darkgray;
		float: left;
	}
	
	.childHong:last-child {
		border: none;
	}
	
	.redimg {
		width: 7.5rem;
		height: 15.3rem;
		margin: 1rem 0 3rem 0;
	}
	
	.jieshao {
		display:block;
		font-size: 2.4rem;
		margin-bottom: 0.5rem;
	}
	
	.jiage {
		display:block;
		font-size: 2.4rem;
		color: red;
	}
	
	.wrap {
		margin-bottom: 9.6rem;
	}
</style>